<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前台主页1</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">


    <style>
        .box1{
            position: absolute;
            width: 100%;
            height: 180px;
            background-color: black;
            opacity:0.4;
            margin-top: -1010px;
        }
        .box2{
            position: absolute;
            width: 100%;
            height: 180px;
            margin-top: 20px;
            margin-left: 0px;
        }
        .line1{
            width: 100%;
            height: 2px;
            background-color: white;
            margin-top: -830px;
        }

        a{
         text-decoration: none;
        }

        h2:nth-child(2){
            margin: -70px 0 0 300px;
        }
        h2:nth-child(3){
            margin: -31px 0 0 400px;
        }
        h2:nth-child(4){
            margin: -32px 0 0 500px;
        }
        h2:nth-child(5){
            margin: -32px 0 0 630px;
        }
        h2:nth-child(6){
            margin: -32px 0 0 740px;
        }
        h2:nth-child(7){
            margin: -32px 0 0 860px;
        }

        .box3{
            position: absolute;
            width: 500px;
            height: 450px;
            /*background-color: red;*/
            margin: 250px 510px 0;
        }
        .box3  h1:nth-child(1){
            color: white;
            text-align: center;
            font-family: 'beyond_the_mountainsregular', sans-serif;
        }
        .box3  h1:nth-child(2){
            color: white;
            font-size: 80px;
            text-align: center;
        }
        .box3  button:nth-child(3){
            width: 250px;
            height: 60px;
            font-size: 20px;
            background-color: white;
            border-radius: 100px;
            margin: 10px 24% 0;
            transition:all 0.4s;
        }
        .box3  button:nth-child(3):hover{
            background-color: yellowgreen;
            color: white;
        }


    </style>



</head>

<body>
<div class="app" id="app" style="position: relative">

    <!--背景图大蒙板-->
    <div style=" background: #000;">
        <img style="opacity:0.6; filter: alpha(opacity=60); width: 100%;height: 800px" src="../img/hero_bg_1.jpg"/>
    </div>

    <!--导航栏小蒙板-->
    <div class="box1" style="">
    </div>
    <!--白色分割线-->
    <div class="line1" style="">
    </div>


    <div class="box2" style="">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)">主页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">菜品信息</template>
                <el-menu-item index="2-1"  @click="url(2)">全部</el-menu-item>

                <el-row :span="8" v-for="item in options1" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-menu-item  @click="url(2)">{{item.flavorType}}</el-menu-item>
                </el-row>

            </el-submenu>
            <el-menu-item  index="3" @click="url(3)">个人购物车</el-menu-item>
            <el-menu-item  index="4" @click="url(4)">个人订单</el-menu-item>
            <el-menu-item  index="6" @click="url(6)">个人订单详情</el-menu-item>
            <el-submenu style="margin: 0 0 0 800px" index="5">
                <template slot="title">
                  {{userInfo.data.username}}
                </template>
                <el-menu-item index="5-1"  @click="url(5)">退出登录</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

    <div class="box3">
        <h1>Welcome To Xx Food </h1>
        <h1>菜品佳肴</h1>
        <button><a href="list/typeList.html">GO TO ORDER FOOD</a></button>
    </div>


</div>


<script src="../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>


<script>
    new Vue({
        el: '#app',


        data:{
            userInfo:{},   //用户信息
            //菜品类型
            options1:[{}],

        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)


            //所有分类查询
            axios.get("/flavors/getAllFlavor").then((res)=> {
                console.log("所有分类查询")
                console.log(res)
                this.options1=res.data.data
            })

        },
        methods: {
            url(index){
              if (index==1){
                  window.location.href='list/typeList.html'
              }else if(index==2){
                  window.location.href='list/typeList.html'
              }else if(index==3){
                  window.location.href='list/shopCar.html'
              }else if(index==4){
                  window.location.href='list/orders.html'
              }else if(index==5){
                  window.location.href='../login/UserLogin.html'
              }else if(index==6){
                  window.location.href='list/ordersList.html'
              }
            },

        }
    })
</script>


</body>
</html>
